<template>
    <div>
        <div v-if="currentPanel == 'default'">
            <el-card>
                <el-input v-model="queryData.activityName" placeholder="客户名称" size="small" style="width: 200px"></el-input>
                <el-select v-model="queryData.activityTemplate" placeholder="选择模板" size="small">
                    <el-option v-for="item in dictionary.activityTemplate" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        size="small"
                        v-model="queryData.activityStartTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-date-picker
                        size="small"
                        v-model="queryData.activityEndTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="primary" @click="" size="small">查询</el-button>
                <el-button size="small">重置</el-button>
            </el-card>

            <div class="interspaceH"></div>

            <el-card>
                <div style="display:flex;">
                    <div>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="currentHandler('create')">添加活动</el-button>
                    </div>
                </div>

                <div class="interspaceH"></div>

                <el-table :data="dataSource" @selection-change="rowChange"
                          :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="activityTemplate" label="活动模板" :formatter="formatter"></el-table-column>
                    <el-table-column prop="activityStartTime" label="活动开始时间" :formatter="formatter"></el-table-column>
                    <el-table-column prop="activityEndTime" label="活动结束时间" :formatter="formatter"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="interspaceH"></div>

                <el-pagination :current-page="currentPage"
                               :page-sizes="[10, 15, 20, 25]" :page-size="10" layout="total, sizes, prev, pager, next" :total="dataSource.length">
                </el-pagination>
            </el-card>
        </div>
        <div v-if="currentPanel == 'create'">
            <CreateActivity @currentHandler="currentHandler" :activityTemplate="dictionary.activityTemplate"/>
        </div>
    </div>
</template>

<script>
import CreateActivity from "@/views/masket/activity/activity_creat";
const queryData = {
    activityName: '',
    activityStartTime: '',
    activityTemplate: '',
    activityEndTime: ''
}

const activityTemplate = [
    {
        value: '1',
        label: '券活动模板'
    },
    {
        value: '2',
        label: '抽奖活动模板'
    },
    {
        value: '3',
        label: '投票活动模板'
    },
    {
        value: '4',
        label: '游戏活动模板'
    },
    {
        value: '5',
        label: '积分活动模板'
    },
    {
        value: '6',
        label: '节日活动模板'
    },
    {
        value: '7',
        label: '调研活动模板'
    },
    {
        value: '8',
        label: '传播/邀请活动模板'
    }
]

export default {
    name: "activity_list",
    components: {CreateActivity},
    data() {
        return {
            currentPage: 0,
            currentPanel: 'default',
            multipleSelection: [],
            queryData: {...queryData},
            dataSource: [],
            dictionary: {
                activityTemplate: activityTemplate
            },
            //字段转换
            fieldType: {
                activityTemplate: "array",
                activityStartTime: "datetime",
                activityEndTime: "datetime"
            },
        }
    },
    mounted() {
        let that = this
        for (let i = 0; i < 10; i++) {
            that.dataSource.push(
                {
                    id: i,
                    activityName: '名称' + (i + 1),
                    activityTemplate: Math.round(Math.random() * 7 + 1).toString(),
                    activityStartTime: new Date(),
                    activityEndTime: new Date()
                }
            )
        }
    },
    methods: {
        currentHandler(e) {
            this.currentPanel = e
        },
        rowChange(val) {
            this.multipleSelection = val;
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        }
    }
}
</script>

<style scoped>

</style>
